<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>健维商城</title>
    <meta name="keywords" content="健维商城" />
    <meta name="description" content="健维商城" />
    <link rel="stylesheet" href="${base}/static/css/mui.css" />
    <link rel="stylesheet" href="${base}/static/css/font/iconfont.css" />
    <style type="text/css">
        .mui-bar-tab .mui-tab-item.mui-active {
            color: #22add6 !important;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "微软雅黑";

        }

        body{
            background: #f0f0f0;
            width: 100%;
            text-align: center;
        }

        .main-box {
            position: relative;
            height: auto;
            max-width: 560px;
            min-width: 320px;
            margin: 0 auto;
        }

        .logo-box {
            padding: 0 15px;
            background: #f5f5f5;
            text-align: center;
            width: 100%;
            border-bottom: 1px solid #cccccc;
        }

        .logo-box img {
            width: auto;
            max-width: 100%;
            height: 36px;
            margin: 1px auto;
            vertical-align: middle;
        }

        .logo-box span {
            color: #22add6;
            font-size: 15px;
            /*height: 52px;
            vertical-align: middle;*/
        }

        .mui-slider-item img {
            height: 180px;
            max-height: 180px;
        }

        .index-product-box-list {
            background: #fff;
            max-width: 560px;
            min-width: 320px;
            margin: 15px auto 0px auto;
            padding: 10px 10px 0px 10px;
        }

        .index-product-box {
            display: block;
            float: left;
            width: 49.5%;
            margin-bottom: 10px;
            margin-top: 10px;
            margin-left: 0.5%;
        }

        .index-product-box img {
            display: block;
            width: 88%;
            height: 180px;
            border: 1px solid #ededed;
            margin: 0 auto;
        }

        .index-product-box h5 {
            width: 88%;
            margin: 0 auto;
            font-weight: normal;
            font-size: 15px;
            color: #333333;
            padding-top: 6px;
            padding-left: 4px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
        }

        .index-product-box > div {
            width: 88%;
            height: 30px;
            margin: 0 auto;
            padding: 0px 2px 0px 4px;
            overflow: hidden;
        }

        .index-product-box > div span {
            display: block;
            color: #FF7B24;
            font-size: 15px;
            line-height: 30px;
            float: left;
            /*width: 50%;*/
            height: 30px;
            overflow: hidden;
        }

        .index-product-box > div span:nth-child(1) {
            font-size: 16px;
            font-weight: bold;
            left:2px;
        }

        .index-product-box >  div span:nth-child(2) {
            border: 1px solid #FF7B24;
            border-radius: 7px;
            text-align: center;
            height: 25px;
            line-height: 25px;
            float: right;
            width: 44px;
            font-size: 14px;
        }

        .footer-tab-nav {
            min-width: 320px;
            max-width: 560px;
            margin: 0 auto;
            background: #fff;
            height: 30px;
            border-top: 1px solid #cccccc;
        }

        .footer-tab-nav span {
            font-size: 26px;
        }

        .mui-tab-item span:nth-child(2) {
            font-size: 11px;
            margin: 3px;
        }
    </style>
</head>

<body>
<div class="main-box">
    <div class="mui-content">

        <!--logo部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 logo-box clear-fix">
                <img src="${base}/static/img/logo_04.png" /><span>健维商城</span>
            </div>
        </div>

        <!--logo部分-->
        <!--轮播图部分-->
        <div class="mui-row">
                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group mui-slider-loop">
                        <%
                            for (ad in ads) {
                        %>
                        <%
                                if(adLP.first) {
                        %>
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="${ads[ads.~size-1].imgLink}" target="_blank">
                                <img src="${base}${ads[ads.~size-1].imgUrl}"/>
                            </a>
                        </div>
                        <%      } %>
                        <div class="mui-slider-item">
                            <a href="${ad.imgLink}" target="_blank">
                                <img src="${base}${ad.imgUrl}"/>
                            </a>
                        </div>
                        <%
                                if (adLP.last){
                        %>
                        <div class="mui-slider-item mui-slider-item-duplicate">
                            <a href="${ads[0].imgLink}" target="_blank">
                                <img src="${base}${ads[0].imgUrl}"/>
                            </a>
                        </div>
                        <%      } %>
                        <%
                            }
                        %>

                    </div>
                    <div class="mui-slider-indicator">
                        <%
                            for (ad in ads) {
                        %>
                        <div class="mui-indicator ${adLP.first?"mui-active"}"></div>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
        <!--轮播图部分-->
        <!--首页产品list部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 index-product-box-list clear-fix">
                <%
                    for (goods in gs) {
                %>
                <div class="index-product-box" id="${goods.goodsId}">
                    <img src="${base}${goods.imgUrl}"/>
                    <h5>${goods.goodsName}</h5>
                    <div class="clear-fix">
                        <span>¥${goods.price/100}</span>
                        <span>购买</span>
                    </div>
                </div>
                <% } elsefor{ %>
                <div>抱歉,商品还未发布.</div>
                <% }%>
        </div>
        <!--首页产品list部分-->
        <!--努力加载中部分-->
        <!--<div class="mui-row">
            <div class="mui-col-xs-12 jiazaizhongbox">
                <img src="${base}/static/img/23.gif" />
            </div>
        </div>
        -->
        <!--努力加载中部分-->
    </div>
    <div style="height: 58px;"></div>
    <div class="mui-row">
        <!--底部nav部分-->
        <nav id="bottomNav" class="mui-bar mui-bar-tab footer-tab-nav">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon"><i class="icons-font icon-shop"></i></span>
                <span class="mui-tab-label">商城首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon"><i class="icons-font icon-classify"></i></span>
                <span class="mui-tab-label">产品分类</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon"><i class="icons-font icon-personal"></i></span>
                <span class="mui-tab-label">个人中心</span>
            </a>
        </nav>
        <!--底部nav部分-->
    </div>
<script src="${base}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {

        var gallery = mui('.mui-slider');
        gallery.slider({
            interval: 3000
        });

        $('#bottomNav a').each(function (r, v) {
            switch (r) {
                case 0:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/shop/home.do',
                            id: 'shop'
                        });
                    });
                    break;
                case 1:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/goods/home.do',
                            id: 'goods'
                        });
                    });
                    break;
                case 2:
                    $(this).bind('tap', function () {
                        mui.openWindow({
                            url: '${base}/front/personal/home.do',
                            id: 'personal'
                        });
                    });
                    break;
            }
        });

        $('.index-product-box').each(function (r,v) {
            $(this).bind('click', function () {
                mui.openWindow({
                    url: '${base}/front/goods/detailInfo.do?pid='+this.id,
                    id: 'goods_detail',
                    show: {
                        autoShow: true,
                        duration: 1000,
                        event: 'titleUpdate'
                    }
                });
            });
        });
    });
</script>
</body>

</html>
